<template>
  <van-popup v-model="isShow" :overlay="true" :close-on-click-overlay="false">
    <div class="tip-dialog-wrap">
      <div class="dialog-title">充值说明</div>
      <div class="dialog-content">
        <div class="content" v-html="strContent"></div>
      </div>
      <div class="footer" @click="handleSure">
        确定
      </div>
    </div>
  </van-popup>
</template>

<script>
import lock from '@/utils/lock';

export default {
  name: 'tipPopup',
  props: {
    content: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isShow: false
    };
  },
  computed: {
    strContent() {
      let endString = '';
      const arr = [];
      if (this.content.length > 0) {
        this.content
          .split('\n')
          .forEach(item => arr.push(`<p>${item.trim()}</p>`));
        endString = `${arr.join('')}`;
      }
      return endString;
    }
  },
  watch: {
    isShow(val) {
      if (val) {
        // document.documentElement.style.overflow = 'hidden';
        // document.body.style.overflow = 'hidden';
        // document.body.style.position = 'fixed';
        lock.afterOpen();
      } else {
        // document.body.style.position = 'static';
        // document.documentElement.style.overflow = 'visible';
        // document.body.style.overflow = 'visible';
        lock.beforeClose();
      }
    }
  },
  methods: {
    handleClose() {
      this.isShow = false;
      this.$emit('onCancel');
    },
    handleSure() {
      this.isShow = false;
      this.$emit('onOk');
    }
  }
};
</script>

<style lang="scss" scoped>
.tip-dialog-wrap {
  width: 275px;
  background-color: #fff;
  border-radius: 4px;

  .dialog-title {
    font-size: 16px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    color: #333;
    line-height: 22px;
    text-align: center;
    padding: 20px 0 12px;
  }

  .dialog-content {
    margin-bottom: 20px;
    .content {
      width: 211px;
      height: 120px;
      margin: 0 auto;
      box-sizing: border-box;
      font-size: 14px;
      font-family: PingFangSC-Regular;
      color: #666;
      word-wrap: break-word;
      word-break: break-all;
      overflow: auto;
      line-height: 20px;
    }
  }

  .footer {
    height: 45px;
    display: flex;
    border-top: 1px solid #eee;
    font-size: 14px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    line-height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.van-popup {
  background-color: transparent;
  border-radius: 0;
}
</style>
